 {/* 聚焦近期热点 */}

import React from 'react';
import BreakOpen from '../components/break_open/break_open'; // 确保引入 BreakOpen 组件

// 定义 ImageGallery 组件的属性接口
interface ImageGalleryProps {
    images: string[]; // 图片源 URL 数组
}


const ImageGallery: React.FC<ImageGalleryProps> = ({ images }) => (
    <div className='focus_bottom'> {/* 包裹整个画廊的容器 */}
    
        <div className='img_left'> {/* 左侧展示第一张图片 */}
            <BreakOpen src={images[0]} alt="" /> {/* 使用 BreakOpen 组件展示第一张图片 */}
        </div>
      
        <div className='img_right'> {/* 右侧展示剩余的图片 */}
            {images.slice(1).map((src, index) => ( // 从第二张开始遍历剩余的图片
                <BreakOpen key={index} src={src} alt="" /> // 使用 BreakOpen 组件展示每张图片，设置唯一的 key
            ))}
        </div>
    </div>
);


export default ImageGallery;
